/** layout */
.layout {
  width: 100%;
  height: 100%;
}
.layout-header {
  display: flex;
  height: @header-height;
}
.layout-main {
  display: flex;
  height: calc(100% - @header-height);
}
// header
.logo {
  min-width: @menu-width;
  width: @menu-width;
  text-align: center;
  line-height: @header-height;
  font-size: 18px;
  font-weight: 600;
  color: @logo-color;
  background-color: @logo-bg;
}
.header {
  flex-grow: 1;
  padding: 0 1rem;
  line-height: @header-height;
  background-color: @header-bg;
}
// sidebar
.sidebar {
  min-width: @menu-width;
  width: @menu-width;
  height: 100%;
  color: @menu-color;
  background-color: @menu-bg;
}
.sidebar-wrapper {
  overflow-x: hidden;
}
// menu
.el-menu {
  border-right: none;
  background-color: @menu-bg;
  .el-menu-item {
    height: @menu-height;
    min-width: @menu-width;
  }
}
.el-sub-menu {
  .el-menu {
    background-color: @submenu-bg;
  }
  &.is-active .el-sub-menu__title {
    color: @submenu-active-color;
  }
}
.el-sub-menu__title {
  height: @menu-height;
  line-height: @menu-height;
  color: @menu-color;
  &:hover {
    background-color: @menu-hover-bg;
  }
}
.el-menu-item {
  height: @menu-height;
  color: @menu-hover-color;
  &:hover {
    background-color: @menu-hover-bg;
  }
  &.is-active {
    color: @menu-active-color;
    background-color: @menu-active-bg;
  }
}
// main
.main {
  flex-grow: 1;
  height: 100%;
  background-color: @main-bg;
}